<template>
  <entity-view  @submit="submit" ref="form">
    <div class="sub-content-block">
      <a-table
        :columns="columns"
        :dataSource="list"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        :scroll="{ x: 2400 }"
      >
         <template slot="operation" slot-scope="text, record">
          <a-icon  type="setting"theme="twoTone" twoToneColor="#4a9ff5" title="修改" @click="edit(record)"></a-icon>
           <a-icon type="minus-circle" v-if="record.supportFlag === 'Y'" theme="twoTone" twoToneColor="#4a9ff5"
                   @click="cancel(record)"  title="停用"/>
           <a-icon type="check-circle" theme="twoTone" twoToneColor="#4a9ff5" v-else @click="cancel(record)" title="启用"/>
           <a-icon type="eye" theme="twoTone" twoToneColor="#4a9ff5" @click="view(record)" title="详情"></a-icon>
        </template>
      </a-table>
      <a-modal
        v-model="modalVisible"
        :title="modalTitle"
        width="1050px"
        @ok="submit"
        :maskClosable="false"
      >
        <trade-info-form-operation ref="modalForm" />
      </a-modal>
    </div>
    <div class="btn-wrapper">
      <a-button type="primary" html-type="submit" @click="goUpdateOne(preOne)"
        >上一步</a-button
      >
      <a-button @click="close">取消</a-button>
    </div>
  </entity-view>
</template>

<script>
import EntityView from "../../../../components/common/entityView/EntityView";
import FormItem from "../../../../components/common/entityView/FormItem";
import TradeInfoFormOperation from "./TradeInfoFormOperation";
import moment from "moment";
moment.locale("zh-cn");

export default {
  name: "TradeInfoForm",
  components: { EntityView, FormItem ,TradeInfoFormOperation},
  inject: ["PDstChannelContext", "operationContext"],
  provide: function () {
    return {
      TradeInfoFormContext: this,
    };
  },
  data: function () {
    return {
      modalVisible:false,
      modalTitle:'',
      list: [],
      beanInfo: {},
      operatorType: "",
      preOne: "limitInfo",
      pagination: {
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      columns: [
        {
          title: "机构标识",
          dataIndex: "instId",
          fixed: "left",
          width: 120,
        },
        {
          title: "通道标识",
          dataIndex: "msgDstId",
          width: 120,
        },
        {
          title: "通道交易码",
          dataIndex: "channelTxn",
          width: 180,
        },
        {
          title: "通道交易描述",
          dataIndex: "txnName",
          width: 200,
        },
        {
          title: "通道交易费率模板",
          dataIndex: "channelTxnRate",
          width: 200,
        },
        {
          title: "交易支持标志",
          dataIndex: "supportFlag",
          width: 200,
          customRender: (text, row, index) => {
            return text
              ? {
                  Y: "支持",
                  N: "不支持",
                }[text]
              : "";
          },
        },
        {
          title: "是否支持智能路由",
          dataIndex: "intelligentRouteFlag",
          width: 200,
          customRender: (text, row, index) => {
            return text
              ? {
                  Y: "支持",
                  N: "不支持",
                }[text]
              : "";
          },
        },
        {
          title: "交易支持开始时间",
          dataIndex: "supportBeginTime",
          width: 150,
        },
        {
          title: "交易支持截止时间",
          dataIndex: "supportEndTime",
          width: 150,
        },
        {
          title: "支持账户类型",
          dataIndex: "supportAcctType",
          width: 150,
          customRender: (text, row, index) => {
            return text
              ? {
                  "*": "不分账户类型",
                  "01": "本行借记账户",
                  "02": "本行贷记账户",
                  "03": "本行存折",
                  "04": "本行内部户",
                  10: "他行借记账户",
                  11: "他行贷记账户",
                  12: "他行存折",
                  13: "他行内部户",
                  20: "借记账户",
                  21: "贷记账户",
                }[text]
              : "";
          },
        },
        {
          title: "交易延迟类型",
          dataIndex: "txnDelayType",
          width: 200,
          customRender: (text, row, index) => {
            return text
              ? {
                  1: "实时到账",
                  2: "普通到账",
                  3: "24小时到账",
                }[text]
              : "";
          },
        },
        {
          title: "交易最大并发数",
          dataIndex: "maxSupportNum",
          width: 200,
        },
        {
          title: "业务报文登记标识",
          dataIndex: "msgRegisterFlag",
          width: 200,
          customRender: (text, row, index) => {
            return text
              ? {
                  Y: "登记",
                  N: "不登记",
                }[text]
              : "";
          },
        },
        {
          title: "验签标志",
          dataIndex: "signFlag",
          width: 150,
          customRender: (text, row, index) => {
            return text
              ? {
                  Y: "验签/MAC",
                  N: "不验签/MAC",
                }[text]
              : "";
          },
        },
        {
          title: "转加密标志",
          dataIndex: "pinFlag",
          width: 150,
          customRender: (text, row, index) => {
            return text
              ? {
                  Y: "转加密",
                  N: "不转加密",
                }[text]
              : "";
          },
        },
        {
          title: "操作",
          fixed: "right",
           scopedSlots: { customRender: "operation" },
        },
      ],
    };
  },
  methods: {
    close(){
      this.PDstChannelContext.modalVisible=false;
    },
    async getList() {
      this.list = [
        {
        },
      ];

      try {
        const res = await this.$get("/admin/igas/pDstTxnAuthCfg/list", {
          dstChannelId: this.PDstChannelContext.beanInfo.dstChannelId,
          instId: this.PDstChannelContext.beanInfo.instId,
          channelTxn: this.beanInfo.channelTxn,
          chnlOptFlag: "upd",
       pageNum: this.pagination.defaultCurrent,
          pageSize: this.pagination.defaultPageSize,
        });

        this.list = res.data || {};
      } catch (e) {
        console.error(e);
      }
    },
    resetFields() {
      return this.$refs.form.resetFields();
    },
    goUpdateOne(param) {
      this.operationContext.tabActiveKey = param;
    },
    openModal(type = "update", item) {
      this.modalTitle = {
        edit: "编辑",
        view: "详情",
        cancel: item.transChannelStatus === "Y" ? "启用" : "停用",
      }[type];
      this.modalVisible = true;
      if(type === 'view'){
        this.isHideFoot = true;
      }else{
        this.isHideFoot = false
      }
      this.$nextTick(() => {
        this.$refs.modalForm.setOperatorType(type);
        if (type === "edit" || type === "view" || type === "cancel") {
          this.$refs.modalForm.setBeanInfo(item);
          this.$refs.modalForm.initTab(); // 调用子组件的方法
        }
        this.$refs.modalForm.resetFields();
      });
    },
    async edit(item) {
      this.openModal("edit", item);
    },
    view(item) {
      this.openModal("view", item);
    },
    async cancel(item) {
      await this.$post("/admin/igas/pDstTxnAuthCfg/changeStatus", {
        chnlOptFlag: "upd",
        instId: item.instId,
        dstChannelId: item.dstChannelId,
        channelTxn: item.channelTxn,
        msgDstId: item.msgDstId,
        optFlag: item.supportFlag === "N" ? "use" : "stop",
        supportFlag: item.supportFlag === "N" ? "Y" : "N",
      }).then((res) => {
        if (res.status === 200) {
          this.$message.success("操作成功！");
          this.pagination.defaultCurrent = 1;
          this.getList();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    async submit(e) {
      e && e.preventDefault && e.preventDefault();
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.defaultCurrent = 1;
        await this.getList();
      }
    },
  },
  async mounted() {
    this.operatorType = this.operationContext.operatorType;
  },

};
</script>

<style scoped>
.btn-wrapper {
  padding: 0 10px;
  width: 100%;
  text-align: center;
}
.subtitle {
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 0 10px;
}

.sub-content-flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.sub-content-block {
  display: block;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10px;
}
.checkAll {
  display: block;
  line-height: unset;
}
</style>
